<template>
  <div>
    <el-row>
      <el-col :span="22" >
          <h2 class="demonstration">准备一张猫猫或者狗狗的照片，让模型来识别吧！</h2>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22" >
        <div>
          <img class="img-box" src="https://oktools.net/ph/400x400?t=上传的图片会显示在这里" width="400" height="400" id="userImage">
        </div>
      </el-col>
    </el-row>
    <div class="clearfix" style="height:30px"></div>
    <el-row>
      <el-col :span="22" >
        <input type="file" id="userFile" @change="handleSelect" hidden>
        <el-button  @click="triggerFileSelect" type="primary">选择您的图片</el-button>
      </el-col>
    </el-row>
    <div class="clearfix" style="height:15px"></div>
    <el-row>
      <el-col :span="24" >
        <h2 style="float:right;padding-right: 200px">识别结果：{{pred}}</h2>
      </el-col>
    </el-row>
    <div hidden>
      <el-button type="text" @click="dialogVisible = true"></el-button>
    </div>
    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose">
      <span>正在加载模型文件，请耐心等待</span>
      <div>
        <img src="../../assets/img/loading.gif" width="200px" alt="">
      </div>
      <div>
        <i>第一次加载这个过程可能会持续5-8分钟，加载完毕会自动跳转。如果加载时间过长，可尝试刷新页面</i>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import * as tf from '@tensorflow/tfjs'
import axios from "axios"

const img = document.getElementById('img');
const version = 2;
const alpha = 0.5;
export default {
  name: "Dog_vs_Cat",
  data(){
    return{
      user_info:{
        id:"",
        nickname:""
      },
      pred:'',
      imageUrl:'',
      dialogVisible: true
    }
  },

  methods:{
    handleSelect() {
      var file = document.getElementById('userFile').files[0];
      var _this = this
      var img = document.getElementById('userImage');
      var fr = new FileReader()
      fr.onloadend = function (e) {
        img.src = e.target.result
        predict(e.target.result)
      }
      fr.readAsDataURL(file)

      async function predict(source) {
        var img =await document.getElementById('userImage');
        let imgTensor =tf.browser.fromPixels(img);
        imgTensor = tf.image.resizeBilinear(imgTensor, [150,150]).toFloat()
        tf.print(imgTensor)
        let tensor = imgTensor.expandDims(0)
        const prediction = window.model.predict(tf.div(tensor,255)).dataSync();
        console.log(prediction)
        var result=prediction
        if(result>0.5){
          if(result<=0.75) _this.$data.pred="其他"
          else _this.$data.pred="狗子"
        }
        else{
          if(1-result<=0.75) _this.$data.pred="其他"
          else _this.$data.pred="猫猫"
        }
        _this.$data.choesed=true;
      }
    },
    triggerFileSelect(){
      var btn=document.getElementById("userFile")
      console.log(btn)
      btn.click()
    },
    handleClose(done) {
      this.$confirm('模型尚未加载完毕，关闭加载将返回上一个页面')
        .then(_ => {
          this.$router.go(-1);
        })
        .catch(_ => {});
    }
  },

  mounted() {
    axios.get("http://192.168.31.103:2444/LoginCenter/getUserInfo").then(function(res){
      console.log(res)
      _this.$data.user_info.id=res.data.user_id;
      _this.$data.user_info.nickname=res.data.nickname;
      if(res.data=="") {
        _this.$router.push({path:"/login"})
        return;
      }
      else{
        _this.$data.user_info.id=res.data.user_id;
        _this.$data.user_info.nickname=res.data.nickname;
      }
    });
    var _this=this
    const MODEL_URL = 'http://192.168.31.103:2444/Dog_vs_Cat/model.json'
    const  loadModel = (async function () {
      window.model = await tf.loadLayersModel(MODEL_URL);
      console.log('load model----------------Dog_vs_Cat')
      console.log(window.model.summary())
    })
    loadModel().then(function(){
      _this.$data.dialogVisible=false
    });
  }
}

</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.img-box{
  display: block;
  border :2px solid gray;
  border-radius: 10px;
  box-shadow:0 0 1px 1px;
  margin : 0 auto;
}

</style>
